<template>
  <li class="search-user cs fx-h-c b-c">
    <div class="left fx-h-c" @click="push">
      <img class="br-5" alt="" :src="item.avatar" />
      <div class="desc fx">
        <span class="sort" v-html="item.username"></span>
        <span class="focus-num">{{ item.focusNum }}个关注者</span>
      </div>
    </div>
    <a-button @click="focus(item.id)" :type="type">{{ focusWord }}</a-button>
  </li>
</template>

<script>
import { handleFocus, setSessionStorage, stringify } from "@/utils/utils";
import { mapState } from "vuex";
export default {
  name: "SearchUser",
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      foc: false,
    };
  },
  computed: {
    ...mapState(["user"]),
    focusWord() {
      return this.foc ? "已关注" : "关注";
    },
    isFocus() {
      return this.foc ? true : false;
    },
    type() {
      return this.foc ? "primary" : "default";
    },
  },
  created() {
    // 获取关注的人
    const follows = this.user.follows;
    // 从当前用户关注的用户的列表查看是否有这个用户
    this.foc = !!(
      follows &&
      follows.find((a) => {
        return this.item.id === a.id;
      })
    );
  },
  methods: {
    async focus(id) {
      await handleFocus(id, this);
    },
    push() {
      setSessionStorage("cid", stringify({ id: this.item.id, isUser: false }));
      this.$router.push({
        name: "user",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.search-user {
  justify-content: space-between;
  padding: 0 3rem;
  height: 9rem;
  &:last-child {
    border: 0;
  }
  .left {
    img {
      width: 6rem;
      height: 6rem;
      margin-right: 2rem;
    }
    .desc {
      height: 4rem;
      flex-direction: column;
      justify-content: space-between;
      .sort {
        font-size: 1.7rem;
      }
      .focus-num {
        color: #8a9aa9;
        font-size: 1.4rem;
      }
    }
  }
}
</style>